<template>
  <div class="default-main ba-table-box page">
    <!-- 按钮与搜索 -->
    <el-row class="page-button">
      <el-button type="primary" @click="save()">新增</el-button>
      <el-button type="success" @click="loadTableData()">刷新</el-button>
      <el-input style="width: 20%; margin: 0 0 0 auto" v-model="searchText" placeholder="搜索" :suffix-icon="Search"
        @keyup.enter="handleSearch" clearable />
    </el-row>

    <!-- 表格 -->
    <el-table :data="page.list" stripe border v-loading="tableLoading">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed type="index" label="序号" width="100" align="center" />
      <el-table-column show-overflow-tooltip prop="accountName" label="账号名称" align="center" />
      <el-table-column show-overflow-tooltip prop="cardId" label="账号" align="center" />
      <el-table-column show-overflow-tooltip prop="openBankName" label="开户行名称" align="center" />
      <el-table-column show-overflow-tooltip prop="openBankNo" label="开户行网点号" align="center" />
      <el-table-column show-overflow-tooltip prop="money" label="余额（元）" align="right" />
      <el-table-column show-overflow-tooltip prop="bankCode" label="银行" align="center" />
      <el-table-column show-overflow-tooltip fixed="right" label="操作" align="center" width="300">
        <template #default="scope">
          <el-button width="50" link type="primary" size="success" @click="saveDetails(scope.row)">流水</el-button>
          <el-button width="50" link type="primary" size="small" @click="recharge(scope.row)"> 充值</el-button>
          <el-button width="50" link type="info" size="small" @click="edit(scope.row)"> 编辑</el-button>
          <el-popconfirm title="确认删除当前数据?" @confirm="del(scope.row)">
            <template #reference>
              <el-button width="50" link type="danger" size="small"> 删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top: 16px" v-model:current-page="page.current" v-model:page-size="page.limit"
      :page-sizes="[5, 10, 20, 50]" :small="small" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
      @current-change="onTableCurrentChange" />

    <!-- 编辑弹窗 -->
    <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="编辑" width="800px" @close="emptyData()">
      <el-form ref="formRef" :model="formData" label-width="120px" class="demo-dynamic">
        <el-form-item label="账号名称">
          <el-input v-model="formData.accountName" clearable></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="formData.cardId" clearable></el-input>
        </el-form-item>
        <el-form-item label="开户行名称">
          <el-input v-model="formData.openBankName" clearable></el-input>
        </el-form-item>
        <el-form-item label="开户行网点号">
          <el-input v-model="formData.openBankNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="余额">
          <el-input-number v-model="formData.money" :min="1" :max="999999999" :precision="2" :step="1" clearable
            size="large" />
        </el-form-item>
        <el-form-item label="银行类型">
          <el-select v-model="formData.bankCode" clearable filterable placeholder="银行类型">
            <el-option v-for="item in bankCodeList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submit()">确认</el-button>
          <el-button @click="emptyData()">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加流水 -->
    <el-dialog v-else-if="detailVisible" v-model="detailVisible" title="添加流水" width="1000px" @close="detailEmptyData()">
      <el-form :inline="true" :model="detailFormData" class="demo-form-inline">
        <el-form-item label="付款银行">
          <el-select v-model="detailFormData.bankName" clearable filterable disabled lazy placeholder="银行类型"
            @change="selectChangedBank()">
            <el-option v-for="item in bankCodeList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="付款人">
          <el-select v-model="detailFormData.accountName" disabled clearable filterable placeholder="付款人"
            @change="selectChangedAccountName()">
            <el-option v-for="item in accountNameList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="付款账号">
          <el-select v-model="detailFormData.accountNo" disabled clearable filterable placeholder="付款人">
            <el-option v-for="item in accountNoList" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>

        <el-form-item label="收款银行">
          <el-cascader v-model="detailFormData.collection" :options="collectionAccount.data" :show-all-levels="true"
            clearable filterable collapse-tags :props="props" width="150px" />
        </el-form-item>
        <el-form-item label="最小金额">
          <el-input-number v-model="detailFormData.minMoney" :min="1.00" :max="999999999" :precision="2" :step="1"
            clearable size="large" />
        </el-form-item>
        <el-form-item label="最大金额">
          <el-input-number v-model="detailFormData.maxMoney" :min="1.00" :max="999999999" :precision="2" :step="1"
            clearable size="large" />
        </el-form-item>
        <el-form-item label="转账次数">
          <el-input-number v-model="detailFormData.transferAccounts" :min="1" :max="100" :step="1" clearable
            size="large" />
        </el-form-item>
        <el-form-item width="1000px">
          <span class="dialog-footer">
            <el-button type="primary" @click="detailOnSubmit()">提交</el-button>
            <el-button @click="detailEmptyData()">关闭</el-button>
          </span>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 账号充值 -->
    <el-dialog v-else-if="centerDialogVisible" v-model="centerDialogVisible" title="账号充值" width="23%" destroy-on-close
      center>
      <el-form :inline="true" :model="accountRecharge" class="demo-form-inline">
        <el-form-item label=" 交易金额">
          <el-input-number v-model="accountRecharge.money" :min="0" :max="999999999" :precision="2" :step="1" clearable
            size="large" />
        </el-form-item>
        <el-form-item width="1000px">
          <span class="dialog-footer">
            <el-button type="primary" @click="accountRechargeClick()">充值</el-button>
          </span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";

let id = 0

const props = {
  multiple: true
}

const collectionAccount = reactive({
  data: []
})

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false);
const tableLoading = ref(false);
const searchText = ref("");
const page = reactive({
  current: 1,
  limit: 20,
  total: 0,
  list: [],
});

const formData = reactive({
  id: "",
  accountName: "",
  cardId: "",
  openBankName: "",
  openBankNo: "",
  money: 1,
  bankCode: "",
});

// 获取银行类型
let bankCodeList = ref([])

// 删除
const del = (row) => {
  request({
    url: "/account/delete/" + row.id,
    method: "delete",
    data: {},
    headers: {}
  }).then(() => {
    ElMessage({
      message: '删除成功.',
      type: 'success',
    })
    loadTableData();
  })

};

// 帐户充值
const recharge = (row) => {
  centerDialogVisible.value = true
  accountRecharge.id = row.id;
  accountRecharge.money = 1.00;

}
// 编辑
const edit = (row) => {
  dialogVisible.value = true;
  formData.bankCode = row.bankCode;
  formData.accountName = row.accountName;
  formData.cardId = row.cardId;
  formData.openBankName = row.openBankName;
  formData.openBankNo = row.openBankNo;
  formData.money = row.money;
  formData.id = row.id;
};

// 新增
const save = () => {
  dialogVisible.value = true;
}

// 清楚form表单数据
const emptyData = () => {
  dialogVisible.value = false;
  formData.bankCode = "";
  formData.accountName = "";
  formData.cardId = "";
  formData.openBankName = "";
  formData.openBankNo = "";
  formData.money = 1;
  formData.id = "";
}

// 保存
const submit = () => {

  request({
    url: "/account/saveUpdate",
    method: "post",
    data: formData,
    headers: {}
  }).then((res) => {
    let data = res.data;
    if (data.code === 10000) {
      ElMessage({
        message: '保存成功.',
        type: 'success',
      })
      emptyData();
      loadTableData();
    } else {
      ElMessage({
        message: data.msg,
        type: 'error',
      })
    }
  })
};

// 搜索
const handleSearch = (e) => {
  e.target.blur();
  loadTableData();
};

// 修改分页
const onTableCurrentChange = (val) => {
  page.current = val;
  loadTableData();
};
const handleSizeChange = (val) => {
  page.limit = val;
  page.current = 1;
  loadTableData();
}
// 查询表格数据
const loadTableData = () => {
  tableLoading.value = true;

  request({
    url: "/account/list",
    method: "post",
    data: {
      "pageNumber": page.current,
      "pageSize": page.limit,
      "query": searchText.value,
    }
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data
      page.current = data.page;
      page.total = data.total;
      page.list = data.list;

    }

  }).finally(() => {
    tableLoading.value = false;
  });

};

const findBankCode = () => {
  request({
    url: "/bank/getBankCode",
    method: "get",
    params: {
      money: accountRecharge.money
    }
  }).then((res) => {
    if (res.status === 200) {
      bankCodeList.value = res.data.data
    }
  })
}

// 账号充值
const centerDialogVisible = ref(false)
const accountRecharge = reactive({
  id: 0,
  money: 1.00
});
const accountRechargeClick = () => {
  request({
    url: "/account/recharge/" + accountRecharge.id,
    method: "get",
    params: {
      money: accountRecharge.money
    }
  }).then((res) => {
    if (res.status === 200) {
      ElMessage({
        message: '充值金额成功.',
        type: 'success',
      })
      loadTableData();
    }
  }).finally(() => {
    centerDialogVisible.value = false;
  });
}

const detailVisible = ref(false);

const detailFormData = reactive({
  bankName: "",
  accountName: "",
  accountNo: "",
  collection: [],
  minMoney: 1.00,
  maxMoney: 100.00,
  transferAccounts: 1
})
// 付款人
let accountNameList = ref([""])
// 付款账号
let accountNoList = ref([""])
// 添加明细
const saveDetails = (row) => {
  detailVisible.value = true

  detailFormData.accountNo = row.cardId
  detailFormData.accountName = row.accountName
  detailFormData.bankName = row.bankCode

  request({
    url: "/account/find/all",
    method: "get",
    params: {
      account: row.cardId
    }
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      collectionAccount.data = data.data
    }
  })

}

// 根据银行名称 查询账号
const findAccountNameList = (bankName) => {
  request({
    url: "/account/find/name/by/bank",
    method: "get",
    params: {
      bankName: bankName
    }
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      accountNameList.value = data.data
      if (undefined === detailFormData.bankName || "" === detailFormData.bankName) {
        detailFormData.accountName = "";
      } else {
        detailFormData.accountName = data.data[0];
        findAccountNo(data.data[0])
      }
    }
  })
}

// 根据账号名称查询账号
const findAccountNo = (accountName) => {
  request({
    url: "/account/find/no/by/name",
    method: "get",
    params: {
      accountName: accountName,
      bankName: detailFormData.bankName
    }
  }).then((res) => {
    if (res.status === 200) {
      let data = res.data;
      accountNoList.value = data.data
      if (undefined === detailFormData.accountName || "" === detailFormData.accountName) {
        detailFormData.accountNo = "";
      } else {
        detailFormData.accountNo = data.data[0];
      }
    }
  })

}
// 银行下拉框数据更改事件
const selectChangedBank = () => {
  detailFormData.accountNo = "";
  findAccountNameList(detailFormData.bankName);
}
// 账号下拉框数据更改事件
const selectChangedAccountName = () => {
  findAccountNo(detailFormData.accountName)
}

// 批量添加明细
const detailOnSubmit = () => {
  request({
    url: "/detail/batch/add",
    method: "post",
    data: detailFormData
  }).then((res) => {
    if (res.status === 200) {
      ElMessage({
        message: '流水生成成功',
        type: 'success',
      })
      loadTableData();
    }
  }).finally(() => {
    detailEmptyData();
  });
}
// 清空明细
const detailEmptyData = () => {
  detailVisible.value = false

  detailFormData.bankName = "";
  detailFormData.accountName = "";
  detailFormData.accountNo = "";
  detailFormData.collection = [];
  detailFormData.minMoney = 1.00;
  detailFormData.maxMoney = 100.00;
  detailFormData.transferAccounts = 1;

}


// 页面挂载
onMounted(() => {
  loadTableData();

  findBankCode();

  findAccountNameList();
});
</script>
<style scoped>
.page {
  width: calc(100% - var(--ba-main-space) - var(--ba-main-space));
  padding: 16px;
  background: #ffffff;
}

.page-button {
  padding: 0 16px 16px 0;
}
</style>
  